<template>
  <div>
    <div class="TalkNav-box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="互联网" name="first"></el-tab-pane>
        <el-tab-pane label="代步车" name="second">代步车</el-tab-pane>
        <el-tab-pane label="旅游" name="third">旅游</el-tab-pane>
        <el-tab-pane label="美食" name="fourth">美食</el-tab-pane>
        <el-tab-pane label="试听" name="fifth">试听</el-tab-pane>
        <el-tab-pane label="数码" name="sixth">数码</el-tab-pane>
        <el-tab-pane label="事实" name="seventh">事实</el-tab-pane>
        <el-tab-pane label="生活" name="eighth">生活</el-tab-pane>
      </el-tabs>
    </div>
    <div>
      <div class="header"></div>
      <div class="TalkNav-internet"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="less" scoped>
.TalkNav-box {
  width: 1200px;
  margin: 0 auto;
}
.header {
  height: 1px;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.TalkNav-internet {
  background: #f5f5f5;
  height: 100px;
}
</style>
<style>
.el-tabs__item:hover {
  color: #109d59;
}
.el-tabs__item {
  padding: 10px 20px;
}
.el-tabs__item.is-active {
  color: #109d59;
}
.el-tabs__active-bar {
  background-color: #109d59;
  top: 0;
  left: 0;
  height: 5px;
}
.el-tabs__nav-wrap::after {
  content: "";
  height: 0;
}
</style>